const colors = require('tailwindcss/colors')

module.exports = {
    content: [],
    darkMode: 'class',
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    theme: {
        // 响应式屏幕大小设定
        screens: {
            'sm': {'min': '640px', 'max': '767px'},
            'md': {'min': '768px', 'max': '1023px'},
            'lg': {'min': '1024px', 'max': '1279px'},
            'xl': {'min': '1280px', 'max': '1535px'},
            '2xl': {'min': '1536px'}
        },
        // 颜色
        colors: {
            // transparent: 'transparent',
            // current: 'currentColor',
            gray: colors.coolGray,
            red: colors.red,
            rose: colors.rose,
            yellow: colors.yellow,
            green: colors.green,
            blue: colors.blue,
            lightBlue: colors.lightBlue,
            fuchsia: colors.fuchsia,
            pink: colors.pink,
            purple: colors.purple,
            indigo: colors.indigo,
            // 自定义颜色 bg-blue-light
            mine: {
                light: '#85d7ff',
                DEFAULT: '#1fb6ff',
                dark: '#009eeb',
            }
        },
        fontFamily: {
            sans: ['Graphik', 'sans-serif'],
            serif: ['Merriweather', 'serif'],
        },
        extend: {
            spacing: {
                '1': '8px',
                '2': '12px',
            },
            borderRadius: {
                '4xl': '2rem',
            }
        },
    },
    variants: {
        backgroundColor: ['active']
    },
    variantOrder: [
        'first',
        'last',
        'odd',
        'even',
        'visited',
        'checked',
        'empty',
        'read-only',
        'group-hover',
        'group-focus',
        'focus-within',
        'hover',
        'focus',
        'focus-visible',
        'active',
        'disabled',
    ],
    plugins: [],
}


